<template>
	<view class="ball page">
		<view class="bgbox px15 boxS pt4" v-if="detail != null">
			<view class="infobox">
				<image class="bg r8" src="/static/img/bg/card_bg2.png" mode="aspectFill"></image>
				<view class="px12 py16 rel">
					<view class="fs12">{{detail.shop.name}} </view>
					<view class="fs20 mt8">{{detail.name}}</view>
					<view class="flex flexC fs12 bold6 mt3">
						<view class="timebox px12 py6 r5">
							<text>￥</text>
							<text class="fs21">{{detail.price}}</text>
							<text>/小时</text>
							<text class="ml20">押金：</text>
							<text class="fs16">{{detail.ya_amount}}</text>
						</view>
						<!-- <view class="ml10">
							<text>优惠时段</text>
							<text class="arrowR dinline"></text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="walletbox cff flex flexC px12 pt12 pb10 mx18 mt12">
			<view class="flex1">
				<view class="balance">
					<text class="fs11">余额:￥</text>
					<text class="fs20 bold6">{{detail.balance}}</text>
				</view>
				<view class="cff fs13 mt9">
					<view v-for="item in chargeList">
						充<text class="bold6 px2">{{item.amount}}</text>
						得<text class="bold6 px2 mr16">{{item.get_amount}}</text>
					</view>
				
				
				</view>
			</view>
			<view class="r40 btn fs12 px13 py6 bold6" @click="$refs.popup.open()">优惠充值</view>
		</view>
		<view class="fs16 c33 mx18 mt24 bold6">开台</view>
		<view class="flex flexC flexW mt10 c33 menu mx18">
			<view class="item boxS bgff flex flexC mr10 py12 r5 pl10 pr5" @click="showVip">
				<view class="flex1">
					<view class="fs15 bold6">会员开台</view>
					<view class="fs10 mt5 c66">会员余额≥押金，直接开台</view>
				</view>
				<image class="iconImg" src="/static/img/icon/vip2.png" mode="aspectFill"></image>
			</view>
			
			<view class="item boxS bgff flex flexC py12 r5 pl10 pr5" @click="addOrder">
				<view class="flex1">
					<view class="fs15">押金开台</view>
					<view class="fs10 mt5 c66">押金{{detail.ya_amount}}元,关灯结账后退回</view>
				</view>
				<image class="iconImg" src="/static/img/icon/tg_icon.png" mode="aspectFill"></image>
			</view>
			<view class="item boxS bgff flex flexC mr10 py12 r5 pl10 pr5" @click="clickHourOpen">
				<view class="flex1">
					<view class="fs15 bold6">定时开台</view>
					<view class="fs10 mt5 c66">自选时长，无押金</view>
				</view>
				<image class="iconImg" src="/static/img/icon/time.png" mode="aspectFill"></image>
			</view>
			
			<view class="item boxS bgff flex flexC py12 r5 pl10 pr5" @click="clickDiscount">
				<view class="flex1">
					<view class="fs15">限时特惠</view>
					<view class="fs10 mt5 c66">门店限时促销优惠</view>
				</view>
				<image class="iconImg" src="/static/img/icon/tehui2.png" mode="aspectFill"></image>
			</view>
			<view class="item boxS bgff flex flexC mr10 py12 r5 pl10 pr5" @click="clickDou">
				<view class="flex1">
					<view class="fs15 bold6">抖音开台</view>
					<view class="fs10 mt5 c66">使用抖音验券开台</view>
				</view>
				<image class="iconImg" src="/static/img/icon/dou2.png" mode="aspectFill"></image>
			</view>
			
			<view class="item boxS bgff flex flexC py12 r5 pl10 pr5" @click="clickMt">
				<view class="flex1">
					<view class="fs15">美团开台</view>
					<view class="fs10 mt5 c66">使用美团验券开台</view>
				</view>
				<image class="iconImg" src="/static/img/icon/mei.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="py30"></view>
		<view class="fixedbox cff r8 py10 px4 aliC fs10 flex flexC flexCol flexJC">
			<view class="bold6">客服热线</view>
			<view class="bold6">400-888-5626</view>
			<button open-type="contact" class="btn fs10 bgff r5 pt6 px4 flex flexC flexCol flexJC mt6 c33">
				<image class="icon" src="/static/img/icon/kf_icon2.png" mode="aspectFill"></image>
				<text>在线客服</text>
			</button>
			<button @click="wechat" class="btn fs10 bgff r5 pt6 px4 flex flexC flexCol flexJC mt6 c33">
				<image class="icon" src="/static/img/icon/tel_icon2.png" mode="aspectFill"></image>
				<text>商家客服</text>
			</button>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<image class="bg" src="/static/img/icon/pupop_bg.png" mode="aspectFill"></image>
				<image class="cover" src="/static/img/icon/jinbi.png" mode="widthFix"></image>
				<view class="cont aliC py10">
					<view class="title fs22 bold6">超值会员充值</view>
					<view class="sub fs18 bold6 mt5">最高可以省1000元</view>
					<scroll-view scroll-y class="list mt8 px18 boxS">
						<view v-for="(item,index) in chargeList2"  class="item r6 py6 mb6 fs15" @click="clickPopCharge(item,index)">
							充<text :class=" item.check == true ? 'bold6 px2 fs20' : 'px2 fs20'">{{item.amount}}</text>
							得<text :class=" item.check == true ? 'bold6 px2 fs20' : 'px2 fs20'">{{item.get_amount}}</text>
						</view>
					</scroll-view>
					<view class="btn aliC flex flexC flexJC mt10">
						<button class="r40 fs18" @click="doVipCharge">立即充值</button>
					</view>
				</view>
				<view class="aliC mt20" @click="$refs.popup.close()">
					<text class="close boxS r50 cff fs28">×</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pay_type: 'balance',
				balance: 0,
				id: '',
				detail: null,
				order_no: '',
				chargeList: [],
				selectIndex: 0,
				isPaying: false,
				dou_code: '',
				mt_code: '',
				tuan_id: -1,
				chargeList2:[],
				selectChargeIndex:0,
				shop:null
			};
		},

		
		onLoad(option) {
			if (option.scene) {
				let scan_url = decodeURIComponent(option.scene);
			
				var index = scan_url.lastIndexOf("\/");
				var result = scan_url.substring(index + 1, scan_url.length);
				var room_id = result.split("-")[1];
				this.id = room_id;
			}
			
			if (option.id) {
				this.id = option.id;
			}
			
		},
		onShow() {
			var token = uni.getStorageSync("token")
			if (token != "") {
				this.havePhone();
			}
			this.getDetail();
			this.checkOrder();
		},
		
		methods:{
			
			clickHourOpen(){
				uni.navigateTo({
					url:'../shop/openTable?shop_name='+encodeURIComponent(this.detail.shop.name)+"&name="+encodeURIComponent(this.detail.name)
					+"&price="+this.detail.price+"&id="+this.detail.id
				})
			},
			
			doVipCharge() {
				this.$refs.popup.close();
				if (this.chargeList2.length == 0) return;
				let param = {
					charge_id: this.chargeList2[this.selectChargeIndex].id,
					orgId: 27
				};
				let that = this;
				this.$api.charge(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
			
						that.chargePay(res.data.payInfo)
			
					} else {
			
					}
				})
			},
			
			chargePay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {
			
						that.getDetail();
					},
					fail: function(err) {
						uni.showToast({
							title: "取消充值",
							icon: 'none'
						});
					}
				});
			},
			
			clickPopCharge(item,index){
				
				item.check = !item.check;
				this.selectChargeIndex = index;
				for(var i=0;i<this.chargeList2.length;i++){
					this.chargeList2[i].check = false;
				}
				for(var i=0;i<this.chargeList2.length;i++){
					if(item.id == this.chargeList2[i].id){
						this.chargeList2[i].check = true;
					}
				}
				this.$forceUpdate();
				console.info("===itemCheck==="+JSON.stringify(this.chargeList2));
			},
			
			wechat() {
				console.info("======="+this.detail.shop.wx_code);
				let that =this;
				if (this.detail.shop.wx_code == "") {
			
					uni.showModal({
						title:"提示",
						content:"该店铺未设置微信，是否拨打电话",
						confirmText:"拨打",
						complete(res) {
							if(res.confirm){
								uni.makePhoneCall({
									phoneNumber:that.detail.shop.tel
								})
							}
						}
					})
					return;
				}
				let image = Array();
				image.push(this.detail.wx_code);
				uni.previewImage({
					urls: image
				});
			},
			
			clickDiscount(){
				uni.navigateTo({
					url: '../discount/couponIndex?id=' + this.detail.shop.id
				})
			},
			
			checkOrder() {
				let param = {};
				let that = this;
				this.$api.checkTableOrder(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						if (res.data != "") {
							uni.showModal({
								title: "提示",
								content: "您有一个订单正在进行中",
								confirmText: "查看",
								complete(res2) {
									if (res2.confirm) {
										uni.navigateTo({
											url: '../order/tableDetail?order_no=' + res.data+"&is_xu=1"
										})
									}
								}
							})
						}
					} else {
			
					}
			
				})
			},
			
			clickMt() {
				let that = this;
				console.info(JSON.stringify(that.shop))
				// uni.navigateTo({
				// 	url:'../discount/tab?shop=' + JSON.stringify(that.shop)+"&id="+that.id
				// })
				uni.navigateTo({
					url:'../discount/tableMt?id='+that.id
				})
			},
			
			clickDou() {
				let that = this;
				// uni.navigateTo({
				// 	url:'../discount/tab?shop=' + JSON.stringify(that.shop)
				// })
				uni.navigateTo({
					url:'../discount/tableDou?id='+this.id
				})
			},
			
			doChargeOpen2() {
			
				let param = {
					charge_id: this.chargeList[this.selectIndex].id,
					table_id: this.detail.id
				};
				let that = this;
				this.$api.tableDoCharge(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.order_no = res.data.order_no;
						if (res.data.payInfo != '') {
							that.wechatPay(res.data.payInfo)
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
			
				})
			},
			
			doChargeOpen() {
			
				this.$refs.couponPopup.close();
				let param = {
					charge_id: this.chargeList[this.selectIndex].id,
					table_id: this.detail.id
				};
				let that = this;
				this.$api.tableDoCharge(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.order_no = res.data.order_no;
						if (res.data.payInfo != '') {
							that.wechatPay(res.data.payInfo)
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
			
				})
			},
			
			clickSelectItem(index) {
				this.selectIndex = index;
			},
			
			showVip() {
			
			
				let param = {
					table_id: this.detail.id,
					shop_id: this.detail.shop_id
				};
				let that = this;
				if (this.isPaying == true) return;
				this.isPaying = true;
				this.$api.openTableBalance(param).then(res => {
					console.info(JSON.stringify(res));
					this.isPaying = false;
					if (res.code == 1) {
						uni.redirectTo({
							url: '../order/tableDetail?order_no=' + res.data
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
						this.$refs.couponPopup.open();
			
					}
			
				})
			},
			
			getChargeList() {
				let param = {
					shop_id: this.detail.shop_id
				};
				let that = this;
				this.$api.tableChargeList(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.chargeList = res.data;
						var list = new Array();
						var max = that.chargeList.length-1;
						for(var i=max;i>=0;i--){
							if(list.length <=2){
								list.push(that.chargeList[i]);
							}
						}
						
						that.chargeList = list;
						that.chargeList2 = res.data;
						 that.chargeList2.map(item =>{
							 item.check = false
						 })
						 that.$nextTick(() => {
						 	this.$refs.popup.open()
						 })
						
						console.info(that.chargeList);
					}
			
				})
			},
			
			addOrder() {
				let param = {
					id: this.id,
					dou_code: this.dou_code,
					mt_code: this.mt_code,
					tuan_id: this.tuan_id
				};
				let that = this;
			
				if (this.isPaying == true) return;
				this.isPaying = true;
				this.$api.tableAddOrder(param).then(res => {
					console.info(JSON.stringify(res));
					that.isPaying = false;
					if (res.code == 1) {
						that.order_no = res.data.order_no;
						if (res.data.payInfo != '') {
							that.wechatPay(res.data.payInfo)
						} else {
							uni.redirectTo({
								url: '../order/tableDetail?order_no=' + that.order_no
							})
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
			
				})
			},
			
			wechatPay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {
			
						uni.redirectTo({
							url: '../order/tableDetail?order_no=' + that.order_no
						})
			
					},
					fail: function(err) {
						that.restore();
						uni.showToast({
							title: "取消开台",
							icon: 'none'
						});
					}
				});
			},
			
			clickCall() {
				uni.makePhoneCall({
					phoneNumber: this.detail.tel
				})
			},
			
			getDetail() {
				let param = {
					id: this.id
				};
				let that = this;
				this.$api.tableDetail(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.detail = res.data;
						that.shop = res.data.shop;
						console.info("===shop=="+JSON.stringify(res.data.shop));
						that.getChargeList();
						
						// if(res.data.shop.is_table_book_mode == 2){
							
						// 	let date = new Date();
						// 	let year = date.getFullYear(); //获取当前年份
						// 	let mon = date.getMonth() + 1; //获取当前月份
						// 	let da = date.getDate(); //获取当前日
						// 	let h = date.getHours(); //获取小时
						// 	let m = date.getMinutes(); //获取分钟
											
						// 	if (mon < 10) {
						// 		mon = "0" + mon;
						// 	}
						// 	if (da < 10) {
						// 		da = "0" + da;
						// 	}
											
						// 	var obj = new Object();
						// 	obj.id = res.data.id;
						// 	obj.shop_id = res.data.shop.id;
						// 	obj.hour = -1;
						// 	obj.startDate = year + "-" + mon + "-" + da;
						// 	uni.navigateTo({
						// 		url: '../order/tableSubmit?item=' + JSON.stringify(obj)
						// 	})
							
						// }else{
						// 	that.detail = res.data;
						// 	that.shop = res.data.shop;
						// 	console.info("===shop=="+JSON.stringify(res.data.shop));
						// 	that.getChargeList();
						// }
						
					}
			
				})
			},
			
			openPayType() {
				this.$refs.payPopup.open();
			},
			
			onClose() {},
			
			havePhone() {
				let param = {};
				let that = this;
				this.$api.haveMobile(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
			
						if (res.data == "") {
							uni.showModal({
								title: "提示",
								content: "为了给您提供更好的服务，请先完善手机号",
								confirmText: "完善",
								complete(res) {
									uni.navigateTo({
										url: '../member/updatePhone'
									})
								}
							})
						}
			
					} else {
			
					}
				})
			},
			
			onChange(ev) {
				this.pay_type = ev.detail.value;
			},
			onPayment() {}
		}
	}
</script>

<style lang="scss" scoped>
.ball {
	background-color: #F7F7F7;
	height: 100%;
	.popup {
		position: relative;
		.cover {
			width: 668rpx;
			height: 576rpx;
			position: absolute;
			top: -48rpx;
			left: calc(50% - 334rpx);
		}
		.bg {
			width: 568rpx;
			height: 680rpx;
		}
		.close {
			width: 60rpx;
			height: 62rpx;
			line-height: 44rpx;
			border: 4rpx solid #fff;
			display: inline-block;
		}
		.cont {
			width: 568rpx;
			height: 680rpx;
			position: absolute;
			top: 0;
			left: calc(50% - 284rpx);
			color: #F79509;
			.title {
				color: #232323;
			}
			.list {
				height: 400rpx;
				.item {
					width: 460rpx;
					border: 2rpx solid #FAD00D;
					background-color: #FEF0B4;
					color: #F79D09;
				}
			}
			.btn {
				button {
					background-color: #FAD00D;
					width: 340rpx;
					height: 76rpx;
					line-height: 76rpx;
					color: #232323;
				}
			}
		}
	}
	.fixedbox {
		background-color: #FAD00D;
		position: fixed;
		bottom: 40rpx;
		right: 10rpx;
		.icon {
			width: 50rpx;
			height: 50rpx;
		}
		.btn {
			width: 120rpx;
		}
	}
	.menu {
		.item {
			width: calc(50% - 20rpx);
			height: 152rpx;
			margin-bottom: 20rpx;
		}
		.iconImg {
			width: 80rpx;
			height: 80rpx;
		}
	}
	.bgbox {
		width: 100%;
		background: linear-gradient(180deg, #FEE72D 1%, #F7F7F7 99%);
		.infobox {
			position: relative;
			color: #5E3612;
			.bg {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
			}
			.rel {
				position: relative;
				z-index: 1;
			}
			.timebox {
				background-color: rgba(255,255,255,.5);
			}
		}
	}
	.walletbox {
		background-color: #393E54;
		border-radius: 20rpx 20rpx 0 0;
		.balance {
			color: #F7E7CC;
		}
		.btn {
			background-color: #F6E4C6;
			color: #393E54;
		}
	}
}
</style>
